<template>

  <div class="app-container">

    <search-bar :form="queryParams" @sub="getList"></search-bar>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          plain
          @click="handleAdd"
        >入库</el-button>

        <el-button
     
            plain
            @click="handleSend"
        >派发</el-button>

      </el-col>
      <right-toolbar @queryTable="getList"></right-toolbar>
    </el-row>

    <vxe-table ref="table" :loading="tableData.loading" :data="tableData.list">
      <vxe-column width="120" field="number" title="图片" align="center">
        <template #default="scope">
          <el-tooltip v-if="scope.row.imgUrl" class="box-item" effect="dark" placement="right-start">
            <template #content>
              <img alt="" :src="showImg(scope.row.imgUrl)" width="100" height="100" />
            </template>
            <img alt="" :src="showImg(scope.row.imgUrl)" width="30" height="30" />
          </el-tooltip>
          <span v-else>没有图片</span>
        </template>
      </vxe-column>
      <vxe-column width="140" field="number" title="编码" align="center"/>
      <vxe-column width="140" field="name" title="名称" align="center"/>
      <vxe-column width="140" field="categoryName" title="分类" align="center"/>
      <vxe-column width="140" field="barcode" title="商品条码" align="center"/>
      <vxe-column width="140" field="brand" title="品牌" align="center"/>
      <vxe-column width="140" field="model" title="规格型号" align="center"/>
      <vxe-column width="140" field="price" title="单价" align="center"/>
      <vxe-column width="140" field="num" title="数量" align="center"/>
      <vxe-column width="140" field="batchNumber" title="批次号" align="center"/>
      <vxe-column width="140" field="warehouseName" title="仓库" align="center"/>
      <vxe-column width="140" field="totalPrice" title="总金额" align="center"/>
      <vxe-column width="140" field="useLimit" title="限领数量" align="center"/>
      <vxe-column title="操作" align="center" width="200" fixed="right">
        <template #default="{ row }">
          <el-button style="margin-right: 10px;" link type="primary" size="small" @click="handleDelete(row)">删除</el-button>
        </template>
      </vxe-column>
    </vxe-table>
<div class="pagination-container">
  <pagination
      v-show="tableData.paging.total>0"
      :total="tableData.paging.total"
      v-model:page="tableData.paging.pageNum"
      v-model:limit="tableData.paging.pageSize"
      @pagination="getList"
    />
</div>
 

    <!-- 入库对话框 -->
    <in-apply-dialog ref="inApplyDialog" @sub="getList"></in-apply-dialog>
    <!-- 派发对话框 -->
    <send-apply-dialog ref="sendApplyDialog" @sub="getList"></send-apply-dialog>

 
  </div>
</template>

<script setup>

import api from "./api.js";
import InApplyDialog from '@/components/Consume/InApplyDialog.vue'
import SendApplyDialog from '@/components/Consume/SendApplyDialog.vue'
import SearchBar from "./SearchBar.vue";

const inApplyDialog = ref();
const sendApplyDialog = ref();

const table = ref();
const tableData = reactive({
  loading: false,
  list: [], // 表格列表数据
  paging: {
    total: 0, // 总条数
    pageNum: 1,
    pageSize: 10,
  }
});

const initQueryParams = {
  batch: false,
  warehouse: false,
  field: 'name',
  value: null
}

const queryParams = reactive({...initQueryParams})

/** 查询资产清单表列表 */
async function getList() {

  tableData.loading = true;
  const {pageNum, pageSize} = tableData.paging;
  const query = {...queryParams};
  const pageReq = {page: pageNum - 1, size: pageSize};
  api.list(query, pageReq).then(response => {
    const { content, totalElements } = response
    tableData.list = content;
    tableData.paging.total = totalElements;
    tableData.loading = false;
  }).catch(error => {
    tableData.loading = false;
    console.log(error);
  });
}

// 表单重置
function reset() {
  Object.assign(queryParams, initQueryParams)
}

/** 搜索按钮操作 */
function handleQuery() {
  tableData.paging.pageNum = 1;
  getList();
}

async function handleDelete(row) {
  await api.del(row.id);
  await getList();
}

/** 重置按钮操作 */
function resetQuery() {
  reset();
  handleQuery();
}

function showImg(img) {
  return import.meta.env.VITE_APP_BASE_API + img;
}

/** 入库按钮操作 */
function handleAdd() {
  inApplyDialog.value.open();
}

function handleSend() {
  sendApplyDialog.value.open();
}

/** 导出按钮操作 */
function handleExport() {
  const queryParams = this.queryParams;
  this.$modal.confirm('是否确认导出所有资产清单表数据项？').then(() => {
    this.exportLoading = true;
    return exportAssetItem(queryParams);
  }).then(response => {
    this.$download.download(response);
    this.exportLoading = false;
  }).catch(() => {});
}

watch(queryParams, (value)=>{
  getList();
})

// 页面打开后获取列表数据
onMounted( async () => {

  await getList();

});

</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  flex-direction: column;
  height: 91vh; 
  overflow: hidden;
}

.vxe-table {
  flex: 1;
  overflow: auto;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;

}
</style>